<template>
    <div class="container">
      文章详情
      <div class="fan">
        <el-button type="text" @click="fan">返回</el-button>
      </div>
      <div class="add">

        <el-button type="text" @click="compile" v-if="title.author.name == names">编辑文章</el-button>
        <el-button type="text" @click="compile" v-else></el-button>
        
      </div>
      <div>
        <div class="user">
          <div>
            <img :src="title.author.img" class="img">
          </div>
          <div class="name">
            {{title.author.name}}
          </div>
        </div>
        <div class="title">
          {{title.article_name}}
        </div>
        <div>
            <img :src="title.img" class="img1">
        </div>
        <div class="synopsis">
          {{title.synopsis}}
        </div>
        <div class="tate">
          ---{{title.issue_date}}---
        </div>
      </div>
      <br/><br/><br/>
      <div class="del">
            <el-button type="danger" @click="del" v-if="title.author.name == names">删除文章</el-button>
            <el-button type="text" @click="compile" v-else></el-button>
      </div>
      
    </div>
</template>

<script>
import Axios from 'axios';
export default {
    // name: '',
    data() {
        return {
          title:{},
          names:localStorage.getItem('name')
        };
    },
    props: {},

    components: {},

    created() {},

    mounted() {
      this.titleGet()
    },

    methods: {
      titleGet(){
        Axios.get('article/info/' + this.$route.query.id)
        .then(res => {
          console.log(res)
          if (res.data.code == 200){
            this.title = res.data.data

          }
        })
        .catch(err => {
          console.log(err)
        })
      },
      compile(){
        this.$router.push('/compile?id=' + this.$route.query.id)
      },
      tiao(id){
        this.$router.push('/xiang?id=' + id)
      },
      del(){
        Axios.delete('article/',{
            params:{id:this.$route.query.id},
            headers:{
                'Authorization':localStorage.getItem('token') || ''
            }
        })
        .then(res => {
          console.log(res)
          if (res.data.code == 200){
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            });
            this.$router.push('/about')
          }else if (res.data.code == 403){
            this.$router.push('/')
          }
        })
        .catch(err => {
          console.log(err)
        })
      },
      fan(){
        this.$router.push('/about')
      }
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped>
.title{
  text-align: left;
  font-weight: bolder;
}

.img{
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

.img1{
  width: 100%;
}

.user{
  margin-top: 20px;
  display:flex;
  margin-bottom: 10px;
}
.name{
  margin-left: 20px;
}

.synopsis{
  margin-top: 10px;
  text-align: left;
  justify-content: space-between;
}

.tate{
  margin-top: 10px;
  text-align:right;
}

.add{
  text-align: right;
}

.del{
    text-align: left;
}
.fan{
    text-align:left;
}
</style>
